<!DOCTYPE html>
<html>
<head>
    <title>维护规程详情</title>
    #parse("sys/header.html")
    <style>
        .ui-jqgrid tr.jqgrow td {
            white-space: normal !important;
            height: auto;
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak>
    <i-form ref="formValidate" :label-width="80" style="text-align: center">
        <Row>
            <i-col span="6">
                <Form-item label="规程内容">
                        <span>
                            {{devMaintenPlan.planCon}}
                        </span>
                </Form-item>
            </i-col>
            <i-col span="6">
                <Form-item label="类型">
                        <span>
                            {{sysEnums.MAINTENPLAN_TYPE[devMaintenPlan.reserve1]}}
                        </span>
                </Form-item>
            </i-col>
            <i-col span="6">
                <Form-item label="设备名称">
                        <span>
                            {{devMaintenPlan.deviceName}}
                        </span>
                </Form-item>
            </i-col>
            <i-col span="6">
                <Form-item label="设备编码">
                        <span>
                            {{devMaintenPlan.deviceCode}}
                        </span>
                </Form-item>
            </i-col>
        </Row>
        <Row>
            <i-col span="6">
                <Form-item label="产线名称">
                        <span>
                            {{devMaintenPlan.line}}
                        </span>
                </Form-item>
            </i-col>
            <i-col span="6">
                <Form-item label="工序名称">
                        <span>
                            {{devMaintenPlan.proce}}
                        </span>
                </Form-item>
            </i-col>
        </Row>
        <Row>
            <i-col span="3">
                <i-button class="info" @click="add"><i class="fa fa-plus"></i>&nbsp;添加维护项</i-button>
            </i-col>
        </Row>
    </i-form>
    <Card>
        <Tabs value="record0" type="card">
            <Tab-pane label="已关联维护项" name="record0">
                <table id="jqGrid"></table>
            </Tab-pane>
        </Tabs>
    </Card>
</div>
<script>
    $(function () {
        var plan_id = getQueryString("planId");
        if(plan_id){
            vm.planId = plan_id;
        }
        //查询计划数据
        vm.loadRecord( vm.planId);
        //获取计划内容
        $("#jqGrid").Grid({
            url: '../devAmMaintenanceOption/list',
            rownumWidth: 35,
            multiselect: false,
            colModel: [
                {label: '选项编码', name: 'code', index: 'CODE', width: 60},
                {label: '部位', name: 'name', index: 'NAME', width: 60},
                {label: '维护内容', name: 'checkContent'},
                {label: '维护标准', name: 'checkSt'},
                {
                    label: '物料需求', name: 'materialRequ',
                    formatter: function (value) {
                        return value ? value : '/';
                    }
                },
                {label: '方法手段', name: 'methodType', width: 120},
                {
                    label: '设备状态', name: 'devStatus', width: 60,
                    formatter: function (value) {
                        if (!value || value == 'null') {
                            return "/";
                        }
                        return sysEnums.MAINTAIN_BASE_DEV_STATUS[value];
                    }
                },
                {label: '人次', name: 'perEv', width: 40},
                {label: '生产', name: 'checkDatePrud', width: 40},
                {label: '非生产', name: 'checkDateUprud', width: 40},
                {
                    label: '实施频率', name: 'preRate', width: 60,
                    formatter: function (value) {
                        return sysEnums.FRERATE[value];
                    }
                },
                {label: 'devType', name: 'devType', index: 'DEV_TYPE', hidden: true},
                {
                    label: '操作', name: 'id', index: 'ID', key: true, width: 60,
                    formatter: function (value, col, row) {
                        return "<button class='btn btn-outline btn-info' onclick='vm.del(\"" + row.id + "\")'><i class='fa fa-trash-o'></i>&nbsp;删除</button>";
                    }
                },
            ],
            postData: {
                'planId': vm.planId
            }
        });
        jQuery("#jqGrid").jqGrid('setGroupHeaders', {
            useColSpanStyle: true,
            groupHeaders: [
                {startColumnName: 'checkDatePrud', numberOfColumns: 2, titleText: '<em>检查时间 / 分</em>'}
            ]
        });

    });
    var vm = new Vue({
        el: '#rrapp',
        data: {
            devMaintenPlan: {},
            planId: ''
        },
        methods: {
            add: function () {
                openWindow({
                    type: 2,
                    title: '<i class="fa fa-bars"></i> 添加维护规程项',
                    content: '../device/devmainbaseam_choose.html?id=' + vm.devMaintenPlan.id + '&devId=' + vm.devMaintenPlan.devId,
                    cancel: function () {
                        vm.reload();
                    }
                });
            },
            del: function (id) {
                confirm('确定要删除选中的记录？', function () {
                    Ajax.request({
                        url: "../devAmMaintenanceOption/delete/" + id,
                        async: true,
                        successCallback: function (res) {
                            alert('操作成功', function (index) {
                                // 重新加载列表数据
                                vm.planId = res.id;
                                vm.reload();
                                // 重新加载数据
                                vm.loadRecord(vm.planId)
                            });
                        }
                    });
                });
            },
            reload: function (event) {
                var page = $("#jqGrid").jqGrid('getGridParam', 'page');
                $("#jqGrid").jqGrid('setGridParam', {
                    postData:{'planId': vm.planId},
                    page: page
                }).trigger("reloadGrid");
            },
            loadRecord: function (plan_id) {
                Ajax.request({
                    url: "../devammaintenancerules/info/" + plan_id,
                    async: true,
                    successCallback: function (r) {
                        vm.devMaintenPlan = r.devMaintenPlan;
                    }
                });
            }
        }
    });


    function f() {
        alert(1111);
    }
</script>
</body>
</html>
